<!DOCTYPE html>
<html lang="en" style="font-size: 100%;">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!-- <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/global.css">
</head>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
<body>
<div class="list" id="app">
    <div class="middle_right">
        <div id="lunbobox">
            <div id="toleft">&lt;</div>
            <div class="lunbo">
                <div href="#" v-for="img in imgs"><img :src="img.src"></div>
            </div>
            <div id="toright">&gt;</div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span></span>
        </div>
    </div>
	 <p style="text-align: center; margin: 10px 0;">{{ message }}</p>
	<ul class="index-list clearfix">
        <li  v-for="site in sites">
            <a href="#" class="block relative">
                <p><img src="../img/1.jpg"></p>
            </a>
            <p class="clearfix mart15 marr15 marl15">
                <a href="#" class="pull-left font16">{{ site.name }}</a>
            </p>
            <div class="mart10 marr15 marl15 clearfix">
                <span class="floatleft">￥<em class="font20 pinghs">{{ site.price }}</em></span>
                <span class="pull-right l_th mart3">市场价RMB<i>{{ site.marketprice }}</i></span>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
  	message: 'Hello Vue.js!',
  	imgs: [
  		{ src: '../img/1.jpg'},
  		{ src: '../img/2.jpg'},
  		{ src: '../img/3.jpg'},
  		{ src: '../img/4.jpg'},
  		{ src: '../img/5.jpg'},
  	],
    sites: [
      { name: '奥迪',
      	price: '799',
      	marketprice: '9000'
       },
      { name: '奔驰',
      	price: '4545',
      	marketprice: '2150' },
      { name: '宝马',
      	price: '2422',
      	marketprice: '42424' },
  	  { name: '本田',
  		price: '2755',
  		marketprice: '45400' }
	]
  }
})
</script>
<script>
    // $(function() {
    //     $('#toright').hover(function() {
    //         $("#toleft").hide()
    //     }, function() {
    //         $("#toleft").show()
    //     })
    //     $('#toleft').hover(function() {
    //         $("#toright").hide()
    //     }, function() {
    //         $("#toright").show()
    //     })
    // })
    var t;
    var index = 0;
    var index_len = $('.lunbo a').length;
    var index_number = index_len - 1;
    // console.log(index_len);
    //自动播放
    t = setInterval(play, 3000)
    function play() {
        index++;
        if (index > 4) {
            index = 0
        }
        $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');

        $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    };

    //点击鼠标 图片切换
    $("#lunbobox ul li").click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        var index = $(this).index();
        $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    });

    //上一张、下一张切换
    $("#toleft").click(function() {
        index--;
        if (index <= 0)
        {
            index = 4
        }
        // console.log(index);
        $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');

        $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    });

    $("#toright").click(function() {
        index++;
        if (index > 4) {
            index = 0
        }
        // console.log(index);
        $(this).css({
            "opacity": "0.5"
        })
        $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');
        $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    });
    $("#toleft,#toright").hover(function() {
            $(this).css({
                "color": "black"
            })
        },
        function() {
            $(this).css({
                "opacity": "0.3",
                "color": ""
            })
        })


    //鼠标移进  移出  轮播停止/继续进行
    $("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
//鼠标移进
        function() {
            $('#toright,#toleft').show()
            clearInterval(t);
        },
//鼠标移开
        function() {
            t = setInterval(play, 3000)

            function play() {
                index++;
                if (index > 4) {
                    index = 0
                }
                $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');
                $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            }
        })


    // // 手机端左右滑动
    // $("#lunbobox").on("swipeleft",function(){
    //     console.log('向左滑动');
    //     $('.toright').click();
    //     index--;
    //     if (index <= 0)
    //     {
    //         index = 4
    //     }
    //     // console.log(index);
    //     $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');

    //     $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    // });
    // $("#lunbobox").on("swiperight",function(){
    //     console.log('向右滑动');
    //     $('.toleft').click();
    //     index++;
    //     if (index > 4) {
    //         index = 0
    //     }
    //     console.log(index);
    //     $(this).css({
    //         "opacity": "0.5"
    //     })
    //     $("#lunbobox ul li").eq(index).addClass('current').siblings().removeClass('current');
    //     $(".lunbo div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    // });
</script>
</body>
</html>